<template>
  <el-dialog
  title="题目预览"
  :visible.sync="previewVisible"
  width="60%">
    <el-descriptions :column="4" class="topInfo">
        <el-descriptions-item label="【题型】">{{data.questionType}}</el-descriptions-item>
        <el-descriptions-item label="【编号】">{{data.id}}</el-descriptions-item>
        <el-descriptions-item label="【难度】">{{data.difficulty}}</el-descriptions-item>
        <el-descriptions-item label="【标签】">{{data.tags}}</el-descriptions-item>
        <el-descriptions-item label="【学科】">{{data.subject}}</el-descriptions-item>
        <el-descriptions-item label="【目录】">{{data.catalogID}}</el-descriptions-item>
        <el-descriptions-item label="【方向】">{{data.direction}}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions style="border-top: 1px solid #c8c8c8;">
        <el-descriptions-item label="【题干】">
          {{data.question | stripHTML }}
          <p> {{data.questionType}}选项：（以下选中的选项为正确答案）</p>
          <p>

            <template v-if="data.questionType==='1'">
              <el-radio-group v-model="radio">
                <el-radio :label="1">备选项</el-radio>
                <el-radio :label="2">备选项</el-radio>
                <el-radio :label="3">备选项</el-radio>
                <el-radio :label="4">备选项</el-radio>
              </el-radio-group>
            </template>
            <template v-else-if="data.questionType==='2'">
              <el-checkbox-group v-model="checkList">
                <el-checkbox style="display: block; padding-top: 10px" label="复选框 A"></el-checkbox>
                <el-checkbox style="display: block; padding-top: 10px" label="复选框 B"></el-checkbox>
                <el-checkbox style="display: block; padding-top: 10px" label="复选框 C"></el-checkbox>
                <el-checkbox style="display: block; padding-top: 10px" label="复选框 D"></el-checkbox>
                <el-checkbox style="display: block; padding-top: 10px" label="复选框 E"></el-checkbox>
              </el-checkbox-group>
            </template>
            <template v-else>

            </template>
          </p>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions style="border-top: 1px solid #c8c8c8; height: 36px;line-height: 36px;">
        <el-descriptions-item label="【参考答案】">
          <el-button
          @click="showVideo=true"
           style="width: 120px;background-color: #f56c6c;color:#fff;border-radius: 3%;">
           视频答案视频
          </el-button>
          <!-- videoURL -->
          <div v-show="showVideo" class="video">
            <video :src="data.videoURL" controls></video>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions style="border-top: 1px solid #c8c8c8; height: 36px;line-height: 36px;">
        <el-descriptions-item label="【答案解析】">
          <template #default="{row}">
            {{ row.answer | stripHTML }}

          </template>
          <!--  stripHTML -->
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions style="border-top: 1px solid #c8c8c8; height: 36px;line-height: 36px;">
        <el-descriptions-item label="【题目备注】">
          <template #default="{row}">
            {{ row.tags | stripHTML }}
          </template>
        </el-descriptions-item>
      </el-descriptions>
    <span slot="footer" class="dialog-footer">
      <el-button @click="previewVisible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      previewVisible: false,
      data: {},
      radio: 3,
      checkList: ['复选框 A', '复选框 C', '复选框 E'],
      showVideo: false
    }
  },
  filters: {
    stripHTML (str) {
      return str.replace(/(<([^>]+)>)/gi, '')
    }
  },
  methods: {

  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-radio{
        display: block;
        line-height: 23px;
        white-space: normal;
        margin-right: 0;
    }
.video{
  width: 500px;
  height: 376px;
}
</style>
